<template>
  <div>
    <div class="bid-details">
      <div class="breadcrumb-link">
        <span @click="fallBack" style="cursor: pointer;">{{$t('bidding.BiddingInformation')}}</span>
        <i class="el-icon-arrow-right"></i>
        <span>{{$t('route.BidDetails')}}</span>
      </div>
      <div class="project-header">
        <div class="project-title">
          <span class="title">{{BidDetailsData.project_name}}</span>
          <span>项目编号：{{BidDetailsData.project_code}}</span>
          <span>发布时间：{{BidDetailsData.bid_publish_date}}</span>
        </div>
        <div class="project-tags">
          <span v-for="tag in BidDetailsData.relevant" :key="tag" v-if="tag!==''">{{tag}}</span>
        </div>
        <div class="collection">
          <i class="iconfont icon-xingxing1" :class="{'collection-detail': collectionDetail}"
             @click="changeCollectionState"></i>
        </div>
      </div>
      <div class="project-info">
        <div class="feedback" @click="feedback">反馈</div>
        <BiddingFeedback :feedbackName="$t('bidding.BiddingFeedback')" :showFeedback="showFeedback"
                         :checkboxOptions="checkboxOptions"
                         @hideFeedback="hideFeedback"></BiddingFeedback>
        <h3 style="margin:0;">中标信息</h3>
        <p>中标产品</p>
        <el-table
          :data="tableDataProduct"
          ref="productTable"
          border
          style="width: 520px">
          <el-table-column
            type="index"
            width="130">
          </el-table-column>
          <el-table-column
            prop="package_brand"
            label="中标品牌"
            width="130">
          </el-table-column>
          <el-table-column
            prop="product"
            label="中标产品"
            width="130">
          </el-table-column>
          <el-table-column
            prop="product_model"
            label="中标型号">
          </el-table-column>
        </el-table>
        <p v-if="tableDataPackage.length!==0">中标包号</p>
        <el-table
          :data="tableDataPackage"
          v-if="tableDataPackage.length!==0"
          ref="packageTable"
          border
          :span-method="objectSpanMethod"
          style="width: 780px;">
          <el-table-column
            prop="package_num"
            label="包号"
            width="130">
          </el-table-column>
          <el-table-column
            prop="package_brand"
            label="中标品牌"
            width="130">
          </el-table-column>
          <el-table-column
            prop="product"
            label="中标产品"
            width="130">
          </el-table-column>
          <el-table-column
            prop="package_model"
            label="中标型号"
            width="130">
          </el-table-column>
          <el-table-column
            prop="number"
            label="中标数量"
            width="130">
          </el-table-column>
          <el-table-column
            prop="package_budget"
            label="成交金额">
          </el-table-column>
        </el-table>
        <div class="info-summary">
          <span>采购总预算：{{BidDetailsData.label_volmoney}} RMB</span>
          <span>采购方式：{{BidDetailsData.purchase_way}}</span>
        </div>
      </div>
      <div class="project-info" style="padding: 10px 20px;">
        <h3 style="margin:0;">中标供应商</h3>
        <p>供应商名称: {{BidDetailsData.winning_supplier}}</p>
        <p>
          <!--<span style="margin-right:44px;">联系人：陈捷（数据里没有中标联系人这一项）</span>-->
          <span>联系方式：{{BidDetailsData.winning_supplier_tel}}</span>
        </p>
        <h3>评审专家</h3>
        <el-table
          :data="tableDataExperts"
          ref="expertsTable"
          border
          style="width: 260px;">
          <el-table-column
            type="index"
            width="130">
          </el-table-column>
          <el-table-column
            prop="name"
            label="专家姓名">
          </el-table-column>
        </el-table>
        <h3>采购单位</h3>
        <p>采购单位名称: {{BidDetailsData.purchase_company_name}}</p>
        <p>采购单位地址: {{BidDetailsData.purchase_company_address}}</p>
        <p>
          <span style="margin-right:44px;">联系人：{{BidDetailsData.purchase_contact_name}}</span>
          <span>联系方式：{{BidDetailsData.purchase_company_phone}}</span>
        </p>
        <h3>代理机构</h3>
        <p>代理机构名称: {{BidDetailsData.agency_name}}</p>
        <p>代理机构地址: {{BidDetailsData.agency_address}}</p>
        <p>
          <span style="margin-right:44px;">联系人：{{BidDetailsData.agency_contact_name}}</span>
          <span>联系方式：{{BidDetailsData.agency_phone}}</span>
        </p>
      </div>
    </div>
    <div class="original-info">
      <h3 style="margin-top: 0">原文</h3>
      <div v-html="BidDetailsData.content_html">

      </div>
    </div>
  </div>
</template>

<script>
  import BiddingFeedback from './components/BiddingFeedback'
  import {mapGetters} from 'vuex'
  import {getBiddingParams,getUsername} from "../../../utils/auth";

  function moneyThousandth(params) {
    let reg = /\d+/;
    params = parseInt(reg.exec(params)[0]);
    if (params.toString() == '0') {
      return params
    } else {
      return comdify(params.toFixed(2).toString()) + '元'
    }
  }
  function comdify(n) {
    var re = /\d{1,3}(?=(\d{3})+$)/g;
    var n1 = n.replace(/^(\d+)((\.\d+)?)$/, function (s, s1, s2) {
      return s1.replace(re, "$&,") + s2
    });
    return n1
  }
  export default {
    name: "BidDetails",
    data(){
      return {
        biddingParams: {}, // session得到的对象
        checkboxOptions: ['中标编号', '采购单位名称', '中标供应商'],
        collectionDetail: false, // 收藏
        projectTags: ['智慧校园', '信息化建设', '高性能', '大数据'],
        uuid: '',
        BidDetailsData: {},
        tableDataProduct: [],
        tableDataExperts: [],
        tableDataPackage: [],
        showFeedback: false
      }
    },
    components: {
      BiddingFeedback
    },
    methods: {
      objectSpanMethod({row, column, rowIndex, columnIndex}) {
        if (columnIndex === 0 || columnIndex === 5) {
          if (row.package_len) {
            return {
              rowspan: row.package_len,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }

        }
      },
      async loadData(){
        let params = {
          uuid: this.uuid,
          type: '中标公告'
        };
        try {
          let res = await this.axios.post('/newBidding/bidDetail', params);
          let resData = res.data;
          if (resData.status === 200) {
            this.BidDetailsData = resData.data;
//            console.log(this.BidDetailsData, 'wwwwwwww');
            this.tableDataProduct = this.BidDetailsData['product_info'];
            this.tableDataExperts = this.BidDetailsData['experts'].map(item => {
              return {name: item}
            });//需要修改
//            let packageInfoData = [
//              {
//                package_num: '1',
//                product_info: [{
//                  product: '信息系统',
//                  number: 'NULL',
//                  package_brand: 'NULL',
//                  package_model: 'NULL'
//                }, {product: '系统集成', number: 'NULL', package_brand: 'NULL', package_model: 'NULL'}],
//                package_budget: '357995元',
//                package_supplier: '内蒙古辛克利电子科技有限公司',
//                package_supplier_tel: 'NULL'
//              }
//            ];
            let packageInfoData = this.BidDetailsData['package_info'];
            let arr2 = [];
            for (let i = 0; i < packageInfoData.length; i++) {
              let brr = [];
              packageInfoData[i].product_info.forEach((item, index) => {
                if (index === 0) {
                  brr.push({
                    package_num: packageInfoData[i].package_num,
                    package_len: packageInfoData[i].product_info.length,
                    package_budget: moneyThousandth(packageInfoData[i].package_budget),
                    ...item
                  });
                } else {
                  brr.push({
                    ...item
                  });
                }
              });
              arr2 = arr2.concat(brr);
            }
            this.tableDataPackage = arr2
//              this.tableData1 = this.TenderDetailsData['purchase_goods'].map(item => {
//                return {name: item}
//              });
//              this.tableData2=this.TenderDetailsData['package_info'];
          }

        } catch (e) {
          console.log(e);
        }
      },
      fallBack() {
        this.$router.go(-1)
      },
      async sendFeedback(data){
        let params = {
          uuid: this.uuid,
          type: '中标公告',
          ...data
        };
        try {
          let res = await this.axios.post('/newBidding/submitFeedback', params);
          let resData = res.data;
          if (resData.status === 200) {
            if (resData.data.data === 'success') {
              return true
            } else {
              return false
            }
          }
        } catch (e) {
          console.log(e);
        }
      },
      hideFeedback(data) {
        if (data) {
          let sendResult = this.sendFeedback(data);
          if (sendResult) {
            this.$toast(this.$t("feedback.success"), 'success')
          } else {
            this.$message.error(this.$t("feedback.fail"));
          }
        }
        this.showFeedback = false
      },
      // changeCollectionState() {
      //   this.collectionDetail = !this.collectionDetail
      // },
      async changeCollectionState() {
        let params = {
          object_id: this.biddingParams.uuid,
          username: getUsername()
        }
        if (this.collectionDetail === 0 ) {
          this.collectionDetail = 1
          let res = await this.axios.post('collectionBidding/addAndDeleteCollection', params)
          if (res.data.status === 200) {
            this.$message.success('收藏成功');
          } else {
            this.$message.error('收藏失败');
          }
        } else {
          this.collectionDetail = 0
          let res = await this.axios.post('collectionBidding/addAndDeleteCollection', params)
          if (res.data.status === 200) {
            this.$message.warning('取消收藏成功');
          } else {
            this.$message.error('取消收藏失败');
          }
        }
      },
      feedback () {
        this.showFeedback = true
      },
      tableResize(){
        this.$refs.productTable.doLayout();
        this.$refs.packageTable.doLayout();
        this.$refs.expertsTable.doLayout();
      },
    },
    created() {
      this.biddingParams = JSON.parse(getBiddingParams())
      this.collectionDetail = this.biddingParams.collect
    },
    beforeMount(){
      this.uuid = this.$route.query.id;
    },
    mounted(){
      this.loadData();
      window.onresize = () => {
        this.tableResize()
      }
    },
    computed: {
      ...mapGetters(
        ['sidebar']
      )
    },
    watch: {
      'sidebar.opened': function (newVal) {
        this.tableResize()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .bid-details {
    padding: 20px 20px 0;
    p {
      margin: 16px 0 !important;
    }
    .breadcrumb-link {
      font-family: OpenSansShin;
      font-size: 20px;
      color: #FF5B00;
    }
    .project-header {
      position: relative;
      margin-top: 12px;
      padding: 20px;
      background: rgba(16, 142, 233, 0.12);
      border-radius: 6px 6px 0 0;
      .project-title {
        span {
          margin-right: 20px;
          font-family: OpenSans-Bold;
          display: inline-block;
          overflow: hidden;
          font-weight: bold;
          font-size: 14px;
          color: #000000;
        }
        .title {
          font-size: 20px;
          max-width: 50vw;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .project-tags {
        margin-top: 10px;
        span {
          display: inline-block;
          margin-right: 22px;
          padding: 2px;
          font-family: OpenSans;
          font-size: 14px;
          color: #FFFFFF;
          background-color: #0090e9;
        }
      }
      .collection {
        position: absolute;
        top: 20px;
        right: 48px;
        .icon-xingxing1 {
          display: inline-block;
          transform: scale(1.5, 1.5);
          padding-left: 5px;
          cursor: pointer;
          color: #b8b8b8;
        }
        .collection-detail {
          color: #f0ba00;
        }
      }
    }
    .project-info {
      background-color: #fff;
      padding: 20px;
      .feedback {
        position: fixed;
        top: 215px;
        right: 55px;
        z-index: 999;
        cursor: pointer;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        line-height: 48px;
        text-align: center;
        font-family: OpenSans-Bold;
        font-size: 16px;
        color: #FFFFFF;
        background: #FF9C15;
      }
      h3 {
        font-family: OpenSans-Bold;
        font-size: 18px;
        color: #333333;
      }
      p {
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #666666;
      }
      .info-summary {
        margin-top: 14px;
        span {
          margin-right: 64px;
          font-family: OpenSans;
          font-size: 16px;
          color: #666666;
        }
      }
    }
  }

  .original-info {
    background-color: #fff;
    margin: 0 20px;
    padding: 0 20px;
  }

</style>
